<template>
  <container title="订单退款">
    <template #tips>
      <el-tabs v-model="tabBarName" @tab-click="tabBarClick" class="title-tab">
        <el-tab-pane v-for="(item, index) in tabBarList" :label="item.label" :name="item.name" :key="index">
        </el-tab-pane>
      </el-tabs>
    </template>


    <div class="main-card" v-loading="loading">
      <tbc-pagination :total="total" :config="{page, size}" simple @change="loadDataList">
        <template v-slot:left>
          <el-input placeholder="订单号" class="short" v-model="filter.keyword" clearable size="small"
                    style="margin-right:10px;width:200px;" prefix-icon="el-icon-search">
          </el-input>
          <el-button
              icon="el-icon-search" type="primary" size="small"
              @click="loadDataList(1)">查询
          </el-button>
        </template>
        <template v-slot:right>
          <el-button size="small" icon="el-icon-refresh" circle @click="loadDataList(page)"></el-button>
        </template>
      </tbc-pagination>
      <div class="data-container tbc-order-list">
        <tbc-dynamic-table
            :data="dataList"
            :span-method="arraySpanMethod"
            :cols="[
            // {type: 'selection', width: 60},
            {label: '商品', prop: 'base', minWidth: 400, className: 'tbc-cell'},
            {label: '单价', prop: 'goods_price', width: 120, align: 'center'},
            {label: '数量', prop: 'goods_number', width: 120, align: 'center'},
            {label: '商品操作', prop: 'goods_operation', width: 120, align: 'center'},
            {label: '实付款', prop: 'order_amount', width: 120, align: 'center'},
            {label: '订单状态', prop: 'order_status_name', width: 120, align: 'center'},
            {label: '操作', width: 100, prop: 'action', fixed: 'right'}]">
          <template v-slot:base="scope">
            <order-list-item :item="scope.row" @showUser="showUser"/>
          </template>
          <template v-slot:order_amount="scope">
            <div style="padding-top: 35px">
              <p>¥{{ scope.row.basic.data.field.order_amount }}</p>
            </div>
          </template>
          <template v-slot:order_status_name="scope">
            <div style="padding-top: 35px">
              <p>{{ scope.row.status.data.field.text }}</p>
            </div>
          </template>
          <template v-slot:action="scope">
            <div style="padding-top: 35px">
              <order-list-item-button :item="scope.row" @operate="onOrderOperate"/>
            </div>
          </template>
        </tbc-dynamic-table>
      </div>
      <tbc-pagination :total="total" @change="loadDataList"/>
    </div>
  </container>
  <user-detail ref="user"/>
</template>
<script lang="ts">
import {
  defineComponent, defineAsyncComponent, onMounted, toRefs,
  reactive, ref, Ref
} from 'vue'
import useOrderRefund from './api/orderRefund'

export default defineComponent({

  name: 'order-refund-list',

  components: {
    OrderListItem: defineAsyncComponent(
        () => import('./components/OrderListItem.vue')),
    OrderListItemButton: defineAsyncComponent(
        () => import('./components/OrderListItemOperation.vue')),
    UserDetail: defineAsyncComponent(
        () => import('@/views/user/UserInfoDialog.vue')
    )
  },

  setup() {
    const order = useOrderRefund()
    const user: Ref = ref(null)
    const state = reactive({
      tabBarList: [
        {value: '', label: '全部', name: '0'},
        {value: 1, label: '待审核', name: '1'},
        {value: 2, label: '审核通过', name: '2'},
        {value: 3, label: '审核未通过', name: '3'}
      ],
      tabBarIndex: 0,
      tabBarValue: '',
      tabBarName: '0'
    })

    const arraySpanMethod = ({columnIndex}: { columnIndex: number }): number[] | void => {
      if (columnIndex === 0) {
        return [1, 4];
      } else if (columnIndex > 0 && columnIndex < 4) {
        return [0, 0];
      }
    }

    const tabBarClick = (tab) => {
      (order.filter.value.audit_status as any) = state.tabBarList[tab.index].value
      order.loadDataList(1)
    }


    // 显示用户
    const showUser = (data: { user_id: string }) => {
      user.value.show(data)
    }

    //
    const updateItemInfo = async (data: { [k: string]: string }) => {
      const res = await order.getInfo(data.order_sn)
      if (res.data.code !== 0) return
      let index = (order.dataList.value as any).findIndex((item: Record<string, any>) => {
        return item.basic.data.field.order_sn === data.order_sn
      });
      (order.dataList.value as any).splice(index, 1, res.data.data)
    }

    onMounted(() => {
      order.loadDataList(1)
    })

    return {
      ...toRefs(state),
      ...order,
      arraySpanMethod,
      tabBarClick,
      user,
      showUser,
      updateItemInfo
    }
  }
})
</script>
